<template>
  <div id="app">
      <!-- 第一种方法 -->
      <!-- <input type="checkbox" value="古河渚" v-model="arr">古河渚
      <input type="checkbox" value="小汐" v-model="arr">小汐
      <input type="checkbox" value="藤林杏" v-model="arr">藤林杏
      <input type="checkbox" value="藤林椋" v-model="arr">藤林椋
      <input type="checkbox" value="智代" v-model="arr">智代
      <input type="checkbox" value="宫泽有纪宁" v-model="arr">宫泽有纪宁
      <input type="checkbox" value="伊吹风子" v-model="arr">伊吹风子
      <input type="checkbox" value="美琴" v-model="arr">美琴
      <ul>
          <li v-for="(val,index) in arr" :key="index" >
              <span>{{val}}</span>
          </li>
      </ul> -->
      <!-- 第二种方法 -->
    <ul >
        <li v-for="(val,i) in arr" :key="i" class="list">
            <input type="checkbox"  v-model="arrAy" :value=val>{{val}}
        </li>
    </ul>
    <br>
    <ul >
        <li v-for="(val,i) in arrAy" :key="i">
            {{val}}
        </li>
    </ul>
  </div>
</template>

<script>
export default { 
    data() {
        return {
             arr:['月宫亚由','水濑名雪','泽渡真琴','美坂栞','川澄舞','仓田佐佑理','美坂香里','天野美汐'],
            arrAy:[]
        }
    },
    methods: {
      
    },
}
</script>

<style >
    .list{
        list-style: none;
        float: left;
    }
</style>